<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Bootstrap5 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="StyleSheet" href="../css/bootstrap.min.css" type="text/css" media="screen"/>
    <link rel="StyleSheet" href="../css/backstage.css" type="text/css" media="screen"/>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>

    <script  type="text/javascript">
        $(function() {
            //初始工作
            $('#item-div').hide();
            $('#select-product').attr("disabled",true);
            const itemTable = $('#item-table');
            const productTable = $('#product-table');
            const itemContent = $('#item-content');
            const productContent = $('#product-content');
            const selectType = $('#select-type');
            const selectCategory = $('#select-category');
            const selectProduct = $('#select-product');
            const itemDiv = $('#item-div');
            const productDiv = $('#product-div');
            let workingProductId = "";
            let workingItemId = "";

            function checkItemTable() {
                if(itemTable.find('tr').length == 1){
                    itemContent.html("<tr><td colspan='8'><b>The item is empty.</b></td></tr>");
                }
            }

            function checkProductTable() {
                if(productTable.find('tr').length == 1){
                    productContent.html("<tr><td colspan='5'><b>The product is empty.</b></td></tr>");
                }
            }

            function bindProductModify() {
                //为所有的modify-product按钮绑定单击事件
                $('.modify-product').each(function () {
                    $(this).on('click',function () {
                        let productRow = this.parentNode.parentNode.parentNode;
                        workingProductId = $(productRow).attr('id');
                        console.log(workingProductId);

                        //发送ajax请求
                        $.get('/backstage/ajaxGetWorkingProduct','productId=' + workingProductId,function (data){
                            $('#modify-product-id').val(data.productId);
                            $('#modify-product-category').val(data.categoryId)
                            $('#modify-product-name').val(data.name)
                            $('#modify-product-desc').val(data.description)
                        });
                    });
                });
            }

            function bindProductRemove() {
                $('.remove-product').each(function () {
                    $(this).on('click',function () {
                        const productRow = this.parentNode.parentNode.parentNode;
                        const productId = $(productRow).attr('id');
                        console.log(productId);

                        //发送ajax请求
                        $.get('/backstage/ajaxRemoveProduct','productId=' + productId,function (){
                            $(productRow).remove();
                            checkProductTable()
                        });
                    });
                });
            }

            function bindItemModify() {
                $('.modify-item').each(function () {
                    $(this).on('click', function () {
                        const itemRow = this.parentNode.parentNode.parentNode;
                        workingItemId = $(itemRow).attr('id');
                        console.log(workingItemId);

                        $.get('/backstage/ajaxGetAllProductId', function (data){
                            let html = "";
                            for (let i = 0; i <data.length ; i++) {
                                html += "<option value='" + data[i] + "'>" + data[i] + "</option>";
                            }
                            $("#modify-item-productId").html(html);
                        });

                        //发送ajax请求
                        $.get('/backstage/ajaxGetWorkingItem','itemId=' + workingItemId,function (data){
                            $('#modify-item-id').val(data.itemId);
                            $('#modify-item-productId').val(data.productId);
                            $('#modify-item-listPrice').val(data.listPrice);
                            $('#modify-item-unitCost').val(data.unitCost);
                            $('#modify-item-supplier').val(data.supplierId);
                            $('#modify-item-attribute').val(data.attribute1);
                            $('#modify-item-quantity').val(data.quantity)
                        });
                    })
                })
            }

            function bindItemRemove() {
                $('.remove-item').each(function () {
                    $(this).on('click',function () {
                        const itemRow = this.parentNode.parentNode.parentNode;
                        workingItemId = $(itemRow).attr('id');
                        console.log(itemRow);

                        //发送ajax请求
                        $.get('/backstage/ajaxRemoveItem','itemId=' + workingItemId,function (){
                            $(itemRow).remove();
                            checkItemTable();
                        });
                    });
                })
            }

            //更新product
            function updateProduct(data) {
                let html="";
                for (let i = 0; i <data.length ; i++) {
                    html += "<tr id='" + data[i].productId + "'>" +
                        "<td>" + data[i].productId + "</td>" +
                        "<td>" + data[i].categoryId + "</td>" +
                        "<td>" + data[i].name + "</td>" +
                        "<td>" + data[i].description + "</td>" +
                        "<td>" +
                        "<div className='btn-group' role='group' aria-label='Basic example'>" +
                        "<button type='button' class='btn btn-primary operation-btn modify-product' data-bs-toggle='modal' data-bs-target='#modifyProduct'>Modify</button>" +
                        "<button type='button' class='btn btn-primary operation-btn remove-product'>Remove</button>" +
                        "</div>" +
                        "</td>" +
                        "</tr>"
                }
                productContent.html(html);

                checkProductTable();

                bindProductModify();
                bindProductRemove();
            }

            //更新item
            function updateItem(data) {
                let html="";
                for (let i = 0; i <data.length ; i++) {
                    html += "<tr id='" + data[i].itemId + "'>" +
                        "<td>" + data[i].itemId + "</td>" +
                        "<td>" + data[i].productId + "</td>" +
                        "<td>" + data[i].listPrice + "</td>" +
                        "<td>" + data[i].unitCost + "</td>" +
                        "<td>" + data[i].supplierId + "</td>" +
                        "<td>" + data[i].attribute1 + "</td>" +
                        "<td>" + data[i].quantity + "</td>" +
                        "<td>" +
                        "<div class='btn-group' role='group' aria-label='Basic example'>" +
                        "<button type='button' class='btn btn-primary operation-btn modify-item' data-bs-toggle='modal' data-bs-target='#modifyItem'>Modify</button>" +
                        "<button type='button' class='btn btn-primary operation-btn remove-item'>Remove</button>" +
                        "</div>" +
                        "</td>" +
                        "</tr>"
                }
                itemContent.html(html);

                checkItemTable();

                bindItemModify();
                bindItemRemove();
            }

            //更新product下拉框
            function updateProductSelect(data) {
                let html="<option value='Any' selected>Any</option>";
                for (let i = 0; i <data.length ; i++) {
                    html += "<option value='" + data[i] + "'>" + data[i] + "</option>";
                }
                selectProduct.html(html);
            }

            //当type变化
            $('#select-type').on('change',function () {
                if(this.value == 'product'){
                    itemDiv.hide();
                    productDiv.show();
                    selectProduct.val('Any');
                    selectProduct.attr('disabled', 'disabled');

                    let categoryId = selectCategory.val();
                    $.get('/backstage/ajaxGetProduct', 'categoryId=' + categoryId, function (data) {
                        updateProduct(data);
                    })
                }
                else if(this.value == 'item'){
                    productDiv.hide();
                    itemDiv.show();
                    selectProduct.removeAttr("disabled");

                    let categoryId = selectCategory.val();

                    $.get('/backstage/ajaxGetProductId', 'categoryId=' + categoryId,function (data) {
                        updateProductSelect(data);
                    })
                }
            })

            //当category变化
            $('#select-category').on('change', function () {
                //首先product变为Any
                selectProduct.val('Any')

                //获取此时的Type，针对Product和Item做不同处理
                let type = selectType.val();

                //获取该category的所有product
                if(type == 'product'){
                    $.get('/backstage/ajaxGetProduct', 'categoryId='+this.value, function (data) {
                        updateProduct(data);
                    })
                }
                //获取该category的所有item，同时更新product下拉选择框
                else{
                    $.get('/backstage/ajaxGetProductId', 'categoryId=' + this.value,function (data) {
                        updateProductSelect(data);
                    })
                    $.get('/backstage/ajaxGetItemByCategoryId','categoryId=' + this.value, function (data){
                        updateItem(data);
                    });
                }
            })

            //当product变化
            $('#select-product').on('change', function () {
                if(this.value == 'Any'){
                    $.get('/backstage/ajaxGetItemByCategoryId','categoryId=' + this.value, function (data){
                        updateItem(data);
                    });
                }
                else{
                    $.get('/backstage/ajaxGetItemByProductId', 'productId='+this.value, function (data) {
                        updateItem(data);
                    })
                }
            })

            bindProductModify();

            //为modify-product-save按钮绑定单击事件
            $('#modify-product-save').on('click',function () {
                $.post({
                    url:"/backstage/ajaxUpdateProduct",
                    data:{
                        'productId': $('#modify-product-id').val(),
                        'categoryId': $('#modify-product-category').val(),
                        'name': $('#modify-product-name').val(),
                        'description': $('#modify-product-desc').val()
                    },
                    success: function (data) {
                        let productRow = $('#' + workingProductId);
                        let tds = productRow.children('td');
                        tds[0].innerText = data.productId;
                        tds[1].innerText = data.categoryId;
                        tds[2].innerText = data.name;
                        tds[3].innerText = data.description;

                        $('#close-modify-product').click();
                    }
                });
            });

            //为所有的modify-item按钮绑定单击事件
            bindItemModify();

            //为modify-item-save按钮绑定单击事件
            $('#modify-item-save').on('click',function () {
                $.post({
                    url:"/backstage/ajaxUpdateItem",
                    data:{
                        'itemId': $('#modify-item-id').val(),
                        'productId': $('#modify-item-productId').val(),
                        'listPrice': $('#modify-item-listPrice').val(),
                        'unitCost': $('#modify-item-unitCost').val(),
                        'supplierId': $('#modify-item-supplier').val(),
                        'attribute1': $('#modify-item-attribute').val(),
                        'quantity': $('#modify-item-quantity').val()
                    },
                    success: function (data) {
                        let itemRow = $('#' + workingItemId);
                        let tds = itemRow.children('td');
                        tds[0].innerText = data.itemId;
                        tds[1].innerText = data.productId;
                        tds[2].innerText = data.listPrice;
                        tds[3].innerText = data.unitCost;
                        tds[4].innerText = data.supplierId;
                        tds[5].innerText = data.attribute1;
                        tds[6].innerText = data.quantity;

                        $('#close-modify-item').click();
                    }
                });
            })

            //为所有的remove-product按钮绑定单击事件
            bindProductRemove();

            //为所有的remove-item按钮绑定单击事件
            bindItemRemove();

            //添加product
            $('#addNewProduct').on('click', function (){
                $.post({
                    url:"/backstage/ajaxAddNewProduct",
                    data:{
                        'productId': $('#product-id').val(),
                        'categoryId': $('#product-category').val(),
                        'name': $('#product-name').val(),
                        'description': $('#product-desc').val(),
                    },
                    success: function (data) {
                        let html = "<tr id='" + data.productId + "'>" +
                                "<td>" + data.productId + "</td>" +
                                "<td>" + data.categoryId + "</td>" +
                                "<td>" + data.name + "</td>" +
                                "<td>" + data.description + "</td>" +
                                "<td>" +
                                "<div className='btn-group' role='group' aria-label='Basic example'>" +
                                "<button type='button' class='btn btn-primary operation-btn modify-product' data-bs-toggle='modal' data-bs-target='#modifyProduct'>Modify</button>" +
                                "<button type='button' class='btn btn-primary operation-btn remove-product'>Remove</button>" +
                                "</div>" +
                                "</td>" +
                                "</tr>";

                        if($('#select-category').val() == 'Any' || data.categoryId == $('#select-category').val())
                            $("#product-content").prepend(html);

                        bindProductModify();
                        bindProductRemove();

                        $('#close-add-product').click();
                    }
                });

            })

            //点击添加新item
            $('#newItemBtn').on('click', function () {
                //先发送请求获取当前的所有productId
                $.get('/backstage/ajaxGetProductId', 'categoryId=Any',function (data) {
                    let html = "";
                    for (let i = 0; i <data.length ; i++) {
                        html += "<option value='" + data[i] + "'>" + data[i] + "</option>";
                    }
                    $("#item-productId").html(html);
                })

                $('#item-id').val('');
                $('#item-listPrice').val('');
                $('#item-unitCost').val('');
                $('#item-supplier').val('');
                $('#item-attribute').val('');
            })

            //点击添加新Product
            $('#newProductBtn').on('click', function () {
                $('#product-id').val('');
                $('#product-category').val('BIRDS');
                $('#product-name').val('');
                $('#product-desc').val('');
            })

            //添加item
            $('#addNewItem').on('click', function (){
                $.post({
                    url:"/backstage/ajaxAddNewItem",
                    data:{
                        'itemId': $('#item-id').val(),
                        'productId': $('#item-productId').val(),
                        'listPrice': $('#item-listPrice').val(),
                        'unitCost': $('#item-unitCost').val(),
                        'supplierId': $('#item-supplier').val(),
                        'attribute1': $('#item-attribute').val()
                    },
                    success: function (data) {
                        console.log(data)
                        let html = "<tr id='" + data.itemId + "'>" +
                                "<td>" + data.itemId + "</td>" +
                                "<td>" + data.productId + "</td>" +
                                "<td>" + data.listPrice + "</td>" +
                                "<td>" + data.unitCost + "</td>" +
                                "<td>" + data.supplierId + "</td>" +
                                "<td>" + data.attribute1 + "</td>" +
                                "<td>" + data.quantity + "</td>" +
                                "<td>" +
                                "<div class='btn-group' role='group' aria-label='Basic example'>" +
                                "<button type='button' class='btn btn-primary operation-btn modify-item' data-bs-toggle='modal' data-bs-target='#modifyItem'>Modify</button>" +
                                "<button type='button' class='btn btn-primary operation-btn remove-item'>Remove</button>" +
                                "</div>" +
                                "</td>" +
                                "</tr>"

                        if($('#select-product').val() == 'Any' || data.productId == $('#select-product').val())
                            $("#item-content").prepend(html);

                        bindItemModify();
                        bindItemRemove();

                        $('#close-add-item').click();
                    }
                });
            })

            //为cancel按钮绑定单击事件
            $('#cancel-add-product').on('click',function () {
                $('#close-add-product').click()
            })
            $('#cancel-add-item').on('click', function () {
                $('#close-add-item').click()
            })
        })
    </script>
</head>
<body>
<main class="border-bottom bg-color">
    <div class="bg-dark my-nav">
        <header class="d-flex py-3">
            <a href="/" class="text-white text-decoration-none">
                <svg class="bi me-2" width="40" height="32"></svg>
                <span class="fs-4">MyPetStore后台管理系统</span>
            </a>

            <svg class="bi me-2" width="100" height="32"></svg>

            <ul class="nav nav-pills">
                <li class="nav-item"><a href="/backstage/main" class="nav-link" aria-current="page">Home</a></li>
                <li class="nav-item"><a href="/backstage/commodity" class="nav-link active">商品管理</a></li>
                <li class="nav-item"><a href="/backstage/account" class="nav-link">账号管理</a></li>
                <li class="nav-item"><a href="/backstage/order" class="nav-link">订单管理</a></li>
            </ul>
        </header>
    </div>

    <div class="bg-color">
        <div class="my-div bg-light radius">
            <div class="small-div">
                Type：
                <select class="form-select-sm my-select" aria-label="Default select example" id="select-type">
                    <option selected value="product">Product</option>
                    <option value="item">Item</option>
                </select>

                <svg class="bi me-2" width="24" height="32"></svg>

                Category：
                <select class="form-select-sm my-select" aria-label="Default select example" id="select-category">
                    <option selected value="Any">Any</option>
                    <option value="BIRDS">Birds</option>
                    <option value="CATS">Cats</option>
                    <option value="DOGS">Dogs</option>
                    <option value="FISH">Fish</option>
                    <option value="REPTILES">Reptiles</option>
                </select>

                <svg class="bi me-2" width="24" height="32"></svg>

                Product：
                <select class="form-select-sm my-select" aria-label="Default select example" id="select-product">
                    <option selected>Any</option>
                </select>

                <svg class="bi me-2" width="24" height="32"></svg>

                <button id="newProductBtn" type="button" class="btn btn-primary my-button" data-bs-toggle="modal" data-bs-target="#newProduct">
                    New Product
                </button>

                <svg class="bi me-2" width="24" height="32"></svg>

                <button type="button" class="btn btn-primary my-button" data-bs-toggle="modal" data-bs-target="#newItem" id="newItemBtn">
                    New Item
                </button>
            </div>

            <hr>

            <div id="product-div">
                <table class="table text-center my-table" id="product-table">
                    <thead class="table-dark">
                    <tr>
                        <th>ProductId</th>
                        <th>Category</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Operation</th>
                    </tr>
                    </thead>

                    <tbody id="product-content">
                    <tr th:each="product:${session.allProduct}" th:id="${product.productId}">
                        <td th:text="${product.productId}"></td>
                        <td th:text="${product.categoryId}"></td>
                        <td th:text="${product.name}"></td>
                        <td th:text="${product.description}"></td>
                        <td>
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-primary modify-product operation-btn" data-bs-toggle="modal" data-bs-target="#modifyProduct">
                                    Modify
                                </button>
                                <button type="button" class="btn btn-primary operation-btn remove-product">Remove</button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div id="item-div">
                <table class="table text-center my-table" id="item-table">
                    <thead class="table-dark">
                    <tr>
                        <th>ItemId</th>
                        <th>ProductId</th>
                        <th>List Price</th>
                        <th>Unit Cost</th>
                        <th>Supplier</th>
                        <th>Attribute</th>
                        <th>Quantity</th>
                        <th>Operation</th>
                    </tr>
                    </thead>

                    <tbody id="item-content">
                    <tr th:each="item:${session.allItem}" th:id="${item.itemId}">
                        <td th:text="${item.itemId}"></td>
                        <td th:text="${item.productId}"></td>
                        <td th:text="${item.listPrice}"></td>
                        <td th:text="${item.unitCost}"></td>
                        <td th:text="${item.supplierId}"></td>
                        <td th:text="${item.attribute1}"></td>
                        <td th:text="${item.quantity}"></td>
                        <td>
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-primary modify-item operation-btn" data-bs-toggle="modal" data-bs-target="#modifyItem">
                                    Modify
                                </button>
                                <button type="button" class="btn btn-primary operation-btn remove-item">Remove</button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
        </div>
    </div>

    <div class="modal" id="newProduct">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">Add New Product</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" id="close-add-product"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div>
                        <label class="text-black">ProductId:</label>
                        <input type="text" class="form-control" placeholder="ProductId" id="product-id">
                    </div>
                    <div>
                        <label class="text-black">Category:</label>
                        <select class="form-select-sm" aria-label="Default select example" id="product-category">
                            <option value="BIRDS" selected>Birds</option>
                            <option value="CATS">Cats</option>
                            <option value="DOGS">Dogs</option>
                            <option value="FISH">Fish</option>
                            <option value="REPTILES">Reptiles</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-black">Name:</label>
                        <input type="text" class="form-control" placeholder="Name" id="product-name">
                    </div>
                    <div>
                        <label class="text-black">Description:</label>
                        <input type="text" class="form-control" placeholder="Description" id="product-desc">
                    </div>

                    <div>
                        <label class="text-black">Image:</label>
                        <input id="product-upload" name="input-b3[]" type="file" class="file" multiple
                               data-show-upload="false" data-show-caption="true" data-msg-placeholder="Select {files} for upload...">
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button id="cancel-add-product" type="button" class="btn btn-outline-primary">Cancel</button>
                    <button id="addNewProduct" class="btn btn-primary" type="submit">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="newItem">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">Add New Item</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" id="close-add-item"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div>
                        <label class="text-black">ItemId:</label>
                        <input type="text" class="form-control" placeholder="ItemId" id="item-id">
                    </div>
                    <div>
                        <label class="text-black">ProductId:</label>
                        <select class="form-select-sm" aria-label="Default select example" id="item-productId">
                        </select>
                    </div>
                    <div>
                        <label class="text-black">List Price:</label>
                        <input type="text" class="form-control" placeholder="List Price" id="item-listPrice">
                    </div>
                    <div>
                        <label class="text-black">Unit Cost:</label>
                        <input type="text" class="form-control" placeholder="Unit Cost" id="item-unitCost">
                    </div>
                    <div>
                        <label class="text-black">Supplier:</label>
                        <input type="text" class="form-control" placeholder="Supplier" id="item-supplier">
                    </div>
                    <div>
                        <label class="text-black">Attribute:</label>
                        <input type="text" class="form-control" placeholder="Attribute" id="item-attribute">
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button id="cancel-add-item" type="button" class="btn btn-outline-primary">Cancel</button>
                    <button id="addNewItem" class="btn btn-primary" type="submit">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modifyProduct">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">Modify Product Information</h4>
                    <button id="close-modify-product" type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div>
                        <label class="text-black">ProductId:</label>
                        <input type="text" class="form-control" placeholder="ProductId" id="modify-product-id" disabled>
                    </div>
                    <div>
                        <label class="text-black">Category:</label>
                        <select class="form-select-sm" aria-label="Default select example" id="modify-product-category">
                            <option value="BIRDS">Birds</option>
                            <option value="CATS">Cats</option>
                            <option value="DOGS">Dogs</option>
                            <option value="FISH">Fish</option>
                            <option value="REPTILES">Reptiles</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-black">Name:</label>
                        <input type="text" class="form-control" placeholder="Name" id="modify-product-name">
                    </div>
                    <div>
                        <label class="text-black">Description:</label>
                        <input type="text" class="form-control" placeholder="Description" id="modify-product-desc">
                    </div>

                    <div>
                        <label class="text-black">Image:</label>
                        <img id="modify-product-src"/>
                        <input id="input-b2" name="input-b2" type="file" class="file" data-show-preview="false">
                    </div>
                </div>


                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary">Cancel</button>
                    <button id="modify-product-save" class="btn btn-primary" type="submit">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modifyItem">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">Modify Item Information</h4>
                    <button id="close-modify-item" type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div>
                        <label class="text-black">ItemId:</label>
                        <input id="modify-item-id" type="text" class="form-control" placeholder="ItemId" disabled>
                    </div>
                    <div>
                        <label class="text-black">ProductId:</label>
                        <select class="form-select-sm" aria-label="Default select example" id="modify-item-productId">

                        </select>
                    </div>
                    <div>
                        <label class="text-black">List Price:</label>
                        <input id="modify-item-listPrice" type="text" class="form-control" placeholder="List Price">
                    </div>
                    <div>
                        <label class="text-black">Unit Cost:</label>
                        <input id="modify-item-unitCost" type="text" class="form-control" placeholder="Unit Cost">
                    </div>
                    <div>
                        <label class="text-black">Supplier:</label>
                        <input id="modify-item-supplier" type="text" class="form-control" placeholder="Supplier">
                    </div>
                    <div>
                        <label class="text-black">Attribute:</label>
                        <input id="modify-item-attribute" type="text" class="form-control" placeholder="Attribute">
                    </div>

                    <div>
                        <label class="text-black">Quantity:</label>
                        <input id="modify-item-quantity" type="text" class="form-control" placeholder="Quantity">
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary">Cancel</button>
                    <button id="modify-item-save" class="btn btn-primary" type="submit">Save</button>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
</html>